<template>
	<view class="ticket-list-main">
		<view class="ticket-list-box">
			<view class="list-box flexR" v-for="item in ticketList" @click="popupBut(item)">
				<image class="list-img" :src="item.imgUrl"></image>
				<view class="list-info-box">
					<view class="list-info">{{item.name}}</view>
					<view class="list-info flexR">
						<up-tag class="tag" v-for="tag in utils.splitStringToArray(item.tags)" :text="tag" plain size="mini" type="warning"></up-tag>
					</view>
					<view class="list-info">{{item.time}}</view>
					<view class="list-info">{{item.cinema}}</view>
				</view>
				<view class="ticket-but flexR">取票</view>
			</view>
		</view> 
	</view>
	
	<!-- 弹出层 -->
	<up-popup :show="ticketShow" mode="center" round='10' :safeAreaInsetBottom='false'>
		<view class="popup-ticket-main flexC" v-if="popupInfo">
			<view class="popup-ticket-info">
				<view class="info">{{popupInfo.name}}</view>
				<view class="info">{{popupInfo.time}}</view>
				<view class="info">{{popupInfo.cinema}}</view>
			</view>
			<view class="popup-ticket-code flexC">
				<image class="code-img" :src="popupInfo.ticketUrl"></image>
				<view class="code-num">取票号：{{popupInfo.code}}</view>
			</view>
			<view class="popup-close-but" @click="closeBut"> 关闭 </view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, reactive, onMounted } from 'vue' 
	import utils from '../../utils/utils.js'
	const ticketShow = ref(false)
	const popupInfo = ref()
	const ticketList = ref([
		{
			ticketUrl:'https://www.xingtucy.com/poster/QRcode.png',
			imgUrl:'https://www.xingtucy.com/poster/S01.jpg',
			name:'沙丘',
			tags:'IMAX,3D',
			time:'2025-06-10 20:55',
			cinema:'1号杜比全景声激光-MAX厅',
			code:'2025 0610 1234 5678'
		} ,
		{
			ticketUrl:'https://www.xingtucy.com/poster/QRcode.png',
			imgUrl:'https://www.xingtucy.com/poster/S01.jpg',
			name:'沙丘',
			tags:'IMAX,3D',
			time:'2025-06-11 20:55',
			cinema:'2号杜比全景声激光-MAX厅',
			code:'2025 0611 1234 5678'
		} 
	])
	
	// 弹框
	const popupBut = (val) => {
		popupInfo.value = val
		ticketShow.value = true
	}
	
	//关闭弹框
	const closeBut = () => {
		ticketShow.value = false
	}
</script>

<style lang="scss" scoped>
	.ticket-list-main{
		padding: 20rpx;
		.ticket-list-box{
			.list-box{
				margin-bottom: 20rpx;
				background: #ffffff;
				overflow: hidden;
				border-radius: 15rpx;
				.list-img{
					width: 150rpx;
					height:185rpx;
				}
				.list-info-box{
					flex: 1;
					padding:2px 20rpx 0 20rpx;
					.list-info{
						padding-bottom: 5rpx;
						.tag{
							margin-right: 10rpx;
						}
					}
					.list-info:last-child{
						padding-bottom: 0;
						width: 426rpx;
					}
					.list-info:nth-child(3),.list-info:nth-child(4){
						font-size: 28rpx;
					}
				} 
				.ticket-but{
					width: 120rpx;
					color: #333333;
					justify-content: center;
					align-items: center;
					border-left: 1rpx #aaaaaa dotted;
				}
			}
		}
	}
	.popup-ticket-main{
		padding: 20rpx;
		width: 600rpx;
		.popup-ticket-info{
			border-bottom: #aaaaaa 1rpx dotted;
			padding-bottom: 20rpx;
			.info{
				text-align: center;
				padding: 10rpx;
			}
			.info:nth-child(1){
				font-size: 36rpx;
				font-weight: bolder;
				
			}
		}
		.popup-ticket-code{
			padding:20rpx 0 50rpx 0;
			align-items: center;
			justify-content: center;
			.code-img{
				width: 400rpx;
				height: 400rpx;
			}
			.code-num{
				padding: 15rpx;
				border-radius: 15rpx;
				background: #eeeeee;
			}
		}
		.popup-close-but{
			padding: 30rpx 0 0 ;
			margin: 0 0 30rpx 0;
			text-align: center;
			border-top: 1rpx #aaaaaa dotted;
		}
	}
</style>
<style>
	page{
		background: #F8F8F8;
	}
</style>